<template>
    <div class="header">
      <div class="search">
      <span class="searchLine">
        <input type="text" id="searchValue" placeholder="输入搜索内容" />
        <button id="searchBt">搜索</button>
        <button class="open" v-if="isOpen" @click="openClose">收起 ▲</button>
        <button class="open" v-else="isOpen" @click="openClose">展开 ▼</button>
      </span>
      </div>
      <hr v-if="isOpen">
      <div class="filter" v-if="isOpen">
      <span id="selectState">
        其他选项：展示状态：
        <select id="showState">
          <option value="showing">展示中</option>
          <option value="offline">已下架</option>
        </select>
      </span>
        <span id="datetime">
        发布时间： <input type="datetime-local" step="01" name="start">
        至 <input type="datetime-local" step="01" name="end">
      </span><br/>
        <button id="added">新增药膳食疗</button>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return{
                searchContent: '',
                isOpen: true,
                showState: '展示中',
                startTime: '',
                endTime: ''
            }
        },
        methods:{
            //点击展开和收起
            openClose(){
                this.isOpen=!this.isOpen;
            }
        }
    }
</script>

<!-- scoped表示该样式只对当前组件可用 -->
<style scoped>
  .search {
    /*background-color: darkgray;*/
    width: 100%;
    height: 100px;
    line-height: 100px;
  }

  #searchValue {
    border: 1px solid darkgray;
    width: 17%;
    height: 31px;
    border-radius: 4px 0 0 4px;
    font-size: 15px;
    padding-left: 10px;
  }

  #searchBt {
    width: 5%;
    background-color: red;
    color: white;
    padding: 8px 0 8px 0;
    border: 1px azure;
    border-radius: 0 8% 8% 0;
  }

  .searchLine {
    margin-left: 5%;
    font-size: 0;
  }

  .open{
    margin-left: 50%;
    border: none;
    background-color: white;
    color: red;
  }

  hr {
    border: 1px dotted darkgray;
    margin-left: 5%;
    margin-right: 5%;
  }

  .filter {
    height: 140px;
    width: 100%;
    /*background-color: darkgray;*/
    font-size: 16px;
    line-height: 70px;
    padding-bottom: 10px;
  }

  #selectState {
    margin-left: 5%;
  }

  #showState {
    width: 17%;
    height: 31px;
    border: 1px solid darkgrey;
    color: darkgrey;
  }

  #datetime {
    margin-left: 10%;
  }

  #datetime input {
    height: 31px;
    font-size: 16px;
    border: 1px solid darkgrey;
    width: 16%;
  }

  #added {
    width: 9%;
    background-color: red;
    color: white;
    padding: 8px 0 8px 0;
    border: 1px azure;
    border-radius: 8% 8% 8% 8%;
    margin-left: 5%;
  }

</style>
